<template>
  <div class="Declare">
    <PublicHead></PublicHead>
    <div class="declareBox">
      <div class="title">
        <div>【新增年审】</div>
        <div>/&ensp;XINZENGNIANSHEN</div>
      </div>
      <div class="title2">
        【申请资料】
      </div>
      <el-col :span="24" class="form-item2">
        <span style="font-size: 18px;font-weight: bold;margin-right: 20px;">年审类型:</span>
        <el-select v-model="type" placeholder="请选择年审类型" @change="choseType">
          <el-option label="示范平台年审" value="0"></el-option>
          <el-option label="示范基地年审" value="1"></el-option>
          <el-option label="入驻机构年审" value="2"></el-option>
        </el-select>
        <span v-if="type != 2"
          style="font-size: 18px;font-weight: bold;margin-right: 20px;margin-left: 20px;">年审级别:</span>
        <el-select v-if="type != 2" v-model="level" placeholder="请选择年审级别" @change="choseLevel">
          <el-option label="国家级" value="0"></el-option>
          <el-option label="省级" value="1"></el-option>
          <el-option label="市级" value="2"></el-option>
        </el-select>
        <div class="block">

        </div>
      </el-col>
      <!-- 申请资料 -->
      <div class="tableBox">

        <el-table v-if="!type || type == 0" :data="tableData" class="my-table" border style="width: 100%;"
          :disabled="true">
          <el-table-column width="60px" label="序号" prop="id" :label-class-name="'table-header'">

          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">{{ scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模板" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">下载模板</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'"
                :on-preview="handlePreview" :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '资料上传') }"
                :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)" :before-remove="beforeRemove"
                multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'" :file-list="row.fileNameList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="type == 1" :data="tableData1" class="my-table" border style="width: 100%;" :disabled="true">
          <el-table-column width="60px" label="序号" prop="id" :label-class-name="'table-header'">

          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">{{ scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模板" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">下载模板</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'"
                :on-preview="handlePreview" :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '资料上传') }"
                :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)" :before-remove="beforeRemove"
                multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'" :file-list="row.fileNameList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="type == 2" :data="tableData2" class="my-table" border style="width: 100%;" :disabled="true">
          <el-table-column width="60px" label="序号" prop="id" :label-class-name="'table-header'">

          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">{{ scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模板" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">下载模板</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'"
                :on-preview="handlePreview" :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '资料上传') }"
                :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)" :before-remove="beforeRemove"
                multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'" :file-list="row.fileNameList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
      </div>



      <div class="tableFoot">
        <button @click="submit(4, '保存成功')">保存</button>
        <button @click="submit(0, '提交成功')">提交</button>
        <button @click="quxiao">取消</button>
      </div>
    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>
    
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { shifan_add1, download, moban_list, upload_file, nianshen_add0, nianshen_add1, nianshen_add2 } from '../api/api'
export default {
  data() {
    return {
      https: http,
      uploadData: {

      },
      resData: {},
      fileList: [],
      response: '',
      token: '',
      upload0: {
        "userId": this.$store.state.userId,
        "level": null,
        "applicationType": null,
        "dataType": 0,
        "file1": { "1,中小企业公共服务示范平台运营情况表_资料上传": [] },
        "file2": { "2,兰州市中小企业公共服务示范平台考核表_资料上传": [] },
        "file3": { "3,上一年度审计报告_资料上传": [] },
        "file4": { "4,示范平台上一年的服务开展工作总结_资料上传": [] },
        pprovalStatus: null,
      },
      upload1: {
        "userId": this.$store.state.userId,
        "level": null,
        "applicationType": null,
        "dataType": 0,
        "file1": { "1,兰州市小型微型企业创业创新示范基地运营情况表_资料上传": [] },
        "file2": { "2,兰州市小型微型企业创业创新示范基地考核表_资料上传": [] },
        "file3": { "3,上一年度审计报告_资料上传": [] },
        pprovalStatus: null,
      },
      upload2: {
        "userId": this.$store.state.userId,
        "level": null,
        "applicationType": null,
        "dataType": 0,
        "file1": { "1,兰州市中小企业公共服务平台入驻机构运营情况汇总表_资料上传": [] },
        "file2": { "2,兰州市中小企业公共服务平台入驻机构年终总结_资料上传": [] },
        pprovalStatus: null,
      },
      tableData: [
        { id: '1', name: "1,中小企业公共服务示范平台运营情况表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586146455756802', type: 'xls' },
        { id: '2', name: "2,兰州市中小企业公共服务示范平台考核表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586326026493954', type: 'doc' },
        { id: '3', name: "3,上一年度审计报告", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586146455756802', type: 'xls' },
        { id: '4', name: "4,示范平台上一年的服务开展工作总结", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586146455756802', type: 'xls' },
      ],
      tableData1: [
        { id: '1', name: "1,兰州市小型微型企业创业创新示范基地运营情况表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586504238276610', type: 'xls' },
        { id: '2', name: "2,兰州市小型微型企业创业创新示范基地考核表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586598102605826', type: 'xls' },
        { id: '3', name: "3,上一年度审计报告", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1658647986688823297', fileId: '1663586504238276610', type: 'xls' },
      ],
      tableData2: [
        { id: '1', name: "1,兰州市中小企业公共服务平台入驻机构运营情况汇总表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586811617845249', type: 'xls' },
        { id: '2', name: "2,兰州市中小企业公共服务平台入驻机构年终总结", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1663586811617845249', type: 'xls' },
      ],
      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      },
      type: null,
      level: null,
    };
  },
  methods: {
    choseType(type) {
      this.upload0.applicationType = type
      this.upload1.applicationType = type
      this.upload2.applicationType = type
    },
    choseLevel(level) {
      this.upload0.level = level
      this.upload1.level = level
      this.upload2.level = level
    },
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    //提交表单
    submit(state, name) {

      if (this.type == 2) {
        this.upload2.level = 3
      }
      if (this.upload0.applicationType && this.upload0.level || this.upload1.applicationType && this.upload1.level || this.upload2.applicationType && this.upload2.level) {
      } else {

        this.$message.error('请选择年审类型或年审级别')
      }

      if (this.type == 0) {
        this.upload0.pprovalStatus = state
        nianshen_add0(this.upload0).then((res) => {
          if (res && res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else if (res && res.data.state == '40900') {
            this.$message.error(res.data.message);
            setTimeout(() => {
              this.$router.push('/gerenCenter')
            }, 1000)
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
      if (this.type == 1) {
        this.upload1.pprovalStatus = state
        nianshen_add1(this.upload1).then((res) => {
          if (res && res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else if (res && res.data.state == '40900') {
            this.$message.error(res.data.message);
            setTimeout(() => {
              this.$router.push('/gerenCenter')
            }, 1000)
          }
          else {
            this.$message.error(res.data.message);
          }
        })
      }
      if (this.type == 2) {
        this.upload2.pprovalStatus = state
        nianshen_add2(this.upload2).then((res) => {
          if (res && res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else if (res && res.data.state == '40900'){
            this.$message.error(res.data.message);
            setTimeout(() => {
              this.$router.push('/gerenCenter')
            }, 1000)
          }
          else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    download(row) {
      if (this.type == 0) {
        console.log(this.type);
        var fileData = {
          1: {
            url: './file/中小企业公共服务示范平台运营情况汇总表.xls',
            fileName: row.name
          },
          2: {
            url: './file/兰州市中小企业公共服务示范平台考核表.doc',
            fileName: row.name
          },
        };
      } else if (this.type == 1) {
        console.log(this.type);
        var fileData = {
          1: {
            url: './file/jidi/小型微型企业创业创新示范基地运营情况汇总表.xls',
            fileName: row.name
          },
          2: {
            url: './file/jidi/小型微型企业创业创新示范基地考核表.xls',
            fileName: row.name
          },
        };
      } else if (this.type == 2) {
        console.log(this.type);
        var fileData = {
          1: {
            url: './file/jigou/兰州市中小企业公共服务平台入驻服务机构运营情况汇总表.xls',
            fileName: row.name
          },
        };
      }

      if (fileData.hasOwnProperty(row.id)) {
        var data = fileData[row.id];
        let link = document.createElement("a");
        link.href = data.url;
        link.setAttribute("download", data.fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        this.$message({
          message: '暂无附件',
          type: 'warning'
        });
      }
    },
    //取消申报
    quxiao() {
      this.$router.go(-1)
    },
    //点击删除按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //预览文件
    handlePreview(file) {
      upload_file({ fileId: file.response.data }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, row, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, row, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          if (this.type == 0) {
            for (var key in this.upload0) {
              console.log(key);
              if (key.slice(4, 6) == row.id) {
                this.upload0[key][name].push(response.data)
                console.log(this.upload);
              }
            }
          } else if (this.type == 1) {
            for (var key in this.upload1) {
              console.log(key);
              if (key.slice(4, 6) == row.id) {
                this.upload1[key][name].push(response.data)
              }
            }
          } else if (this.type == 2) {
            for (var key in this.upload2) {
              console.log(key);
              if (key.slice(4, 6) == row.id) {
                this.upload2[key][name].push(response.data)
              }
            }
          }

        }
      }

    }
  },
  mounted() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId

    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
  },
  filters: {
    flitt(name) {
      console.log(name);
      var name1 = name.split(',')
      var name2 = name1.shift()
      console.log(name2);
      return name1.toString()
    }
  },
  components: {
    PublicHead,
    PublicFoot,
  }
}
</script>
    
<style scoped lang="scss"> .form-item2 {
   display: flex;
   margin: 10px 0px;
   align-items: center;
 }

 .declareBox {
   width: 1220px;
   height: 100%;
   background: #FFFFFF;
   margin: 30px auto;
   box-sizing: border-box;
   padding: 10px 50px;

   .title {
     display: flex;

     div:nth-of-type(1) {
       width: 120px;
       height: 50px;
       font-size: 18px;
       font-family: Microsoft YaHei;
       font-weight: bold;
       color: #262626;
       line-height: 50px;
       margin-bottom: 20px;
       border-bottom: 4px #1285D7 solid;

     }

     div:nth-of-type(2) {
       height: 50px;
       font-size: 15px;
       font-family: Arial;
       font-weight: 400;
       color: #DCDCDC;
       line-height: 50px;
       margin-right: 5px;

       border-bottom: 4px #1285D7 solid;

     }

     div:nth-of-type(3) {
       width: 189px;
       height: 50px;
       font-size: 15px;
       font-family: Arial;
       font-weight: 400;
       color: #DCDCDC;
       line-height: 50px;

       border-bottom: 4px #1285D7 solid;

     }

   }

   .title2 {
     width: 150px;
     height: 40px;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #1285D7;
   }
 }

 .fujian {
   width: 1136px;
   height: 55px;
   background: #EBF5FC;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #1285D7;
   line-height: 55px;
   margin: 10px 0px;
   padding-left: 20px;
   cursor: pointer;
 }

 .lianxi {
   display: flex;
   margin-bottom: 50px;

   div {
     width: 206px;
     height: 55px;
     background: #FAFAFA;
     border: 2px solid #EEEEEE;
     line-height: 55px;
     text-align: center;
   }

   div:nth-of-type(1) {
     width: 30%;
   }
 }

 .tableFoot {
   width: 100%;
   display: flex;
   justify-content: center;

   button {
     margin: 20px 10px;

     &:hover {
       cursor: pointer;
     }
   }

   button:nth-of-type(1) {
     width: 98px;
     height: 40px;
     background: #F39200;
     border: 0;
     border-radius: 3px 3px 3px 3px;
     color: white;
     margin-left: 20px;
   }

   button:nth-of-type(2) {
     width: 98px;
     height: 40px;
     background: #2797E8;
     border-radius: 3px 3px 3px 3px;
     border: 0;

     color: white;
   }

   button:nth-of-type(3) {
     width: 98px;
     height: 40px;
     background: #c2b9b9;
     border-radius: 3px 3px 3px 3px;
     color: white;
     border: 0;
   }
 }

 .name {
   width: 208px;
   height: 45px;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #FD8544;
 }

 .text {
   cursor: pointer;
   color: #1285D7;
 }

 .iconDownload {
   height: 14px;
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #1285D7;
 }

 .el-table__header {
   background-color: #1285D7 !important;
   color: white;
 }

 ::v-deep .el-table__header th.is-leaf,
 ::v-deep .el-table__header th.gutter {
   background-color: #1285D7 !important;
   color: white;
   font-size: 16px;
 }

 .status {
   width: 48px;
   height: 16px;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #D62502;
 }

 .el-button--primary {
   background-color: #fd8544;
   border-color: #fd8544;
 }
</style>